<template>
  <el-container>
      <el-header>事件定义</el-header>
      <el-main>
        <el-header class="header-tool-bar" height="50px">
          <el-row>
            <el-button type="primary" size="mini" @click="addData">增加</el-button>
            <el-button type="primary" size="mini" @click.stop="deleteData">删除</el-button>
            <el-button type="primary" size="mini" @click="editData">编辑</el-button>
            <el-button type="primary" size="mini" @click="refreshData">刷新</el-button>
            <span class="conditionquery">
              <el-input v-model="condition" size="mini" prefix-icon="el-icon-search" placeholder="请输入内容" clearable></el-input>
              <el-button type="primary" size="mini" @click="conditionquery">查询</el-button>
            </span>
          </el-row>
        </el-header>
        <el-table :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableLoading" @select="checkrow">
          <el-table-column type="selection" width="auto"></el-table-column>
          <el-table-column prop="meta_id" label="元数据代码" width="auto"></el-table-column>
          <el-table-column prop="event_id" label="事件id" width="auto"></el-table-column>
          <el-table-column prop="event_name" label="事件名称" width="auto"></el-table-column>
          <el-table-column prop="event_type" abel="事件类型" width="auto"></el-table-column>
          <el-table-column prop="event_group" label="事件分组" width="auto"></el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pagesize" layout="total, prev, pager, next" :total="totalCount"></el-pagination>
      </el-main>
      <el-dialog :title="addRoleDialogMode == 'ADD' ? '新增数据' : '编辑数据'" :visible.sync="addRoleDialogVisiable" v-model="addRoleDialogMode" @close="closeDialog" width="900px">
      <el-form :model="dialogForm" :rules="rules" ref="dialogForm" label-width="140px" class="demo-dialogForm">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="元数据代码" prop="meta_id">
              <el-input v-model="dialogForm.meta_id" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事件id" prop="event_id">
              <el-input v-model="dialogForm.event_id" :disabled="editmetadisa"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="事件类型" prop="event_type">
              <el-input v-model="dialogForm.event_type"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事件分组" prop="event_group">
              <el-input v-model="dialogForm.event_group"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="业务描述" prop="busi_desc">
              <el-input v-model="dialogForm.busi_desc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="技术描述" prop="tech_desc">
              <el-input v-model="dialogForm.tech_desc"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="事件名称" prop="event_name">
              <el-input v-model="dialogForm.event_name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="dialogbtn">
          <el-button @click="resetFormData('dialogForm')">重置</el-button>
          <el-button @click="closeDialog">关闭</el-button>
          <el-button type="primary" @click="submitFormData('dialogForm')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>
<script>
  import ajax from '../../../../api/ajax/ajax'
  import api from '../../../../api/url'
  export default {
    name: 'event-manage',
    data () {
      let numLette = {
        test: /^[A-Za-z0-9]+$/,
        message: '只能输入数字和字母'
      }
      let numLetteValidator = (rule, value, callback) => {
        if (numLette.test.test(value)) {
          callback()
        } else {
          callback(new Error(numLette.message))
        }
      }
      return {
        tableLoading: true, // 表格Loading
        local_meta_table_name: '', // 点击增加在本地保存元数据代码
        checkbox: [], // 编辑判断是否只勾选一个
        multipleSelection: [], // 多选数组
        totalCount: 0, // 默认数据总数
        editmetadisa: false, // input框禁止修改
        addRoleDialogMode: 'ADD', // 对话框色对话框模式  ADD新增 MODIFY 修改
        currentPage: 1, // 当前页码
        pagesize: 10, // 默认每页数据量
        tableData: [], // 表格当前页数据
        list: [],
        condition: '', // 输入条件
        dialogForm: {
          meta_id: ''
        }, // 弹窗表单
        rules: { // 弹窗校验规则
          meta_id: [
            {required: true, message: '请输入', trigger: 'blur'},
            { validator: numLetteValidator, trigger: 'blur' },
            { min: 1, max: 20, message: '最多输入20个字符', trigger: 'blur' }
          ],
          event_id: [
            {required: true, message: '请输入', trigger: 'blur'},
            { min: 1, max: 20, message: '最多输入20个字符', trigger: 'blur' }
          ],
          event_name: [
            {required: true, message: '请输入', trigger: 'blur'},
            { min: 1, max: 20, message: '最多输入20个字符', trigger: 'blur' }
          ],
          event_type: [
            {required: true, message: '请输入', trigger: 'blur'},
            { min: 1, max: 10, message: '最多输入10个字符', trigger: 'blur' }
          ],
          event_group: [
            {required: true, message: '请输入', trigger: 'blur'},
            { min: 1, max: 20, message: '最多输入20个字符', trigger: 'blur' }
          ]
        },
        addRoleDialogVisiable: false,
        editdialogform: false,
        currentItem: {}
      }
    },
    methods: {
      // 增加
      addData () {
        this.adddialogForm()
        ajax.post(api.METAIDBUILDER, {meta_table_name: 'ba_meta_event'}).then((res) => {
          this.local_meta_table_name = res.data
          this.$set(this.dialogForm, 'meta_id', res.data)
        })
      },
      // 删除数据
      deleteData () {
        if (this.checkbox.length > 0) {
          this.$confirm('是否删除所选记录', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let remdata = {
              key_list: this.list
            }
            ajax.post(api.DELETE_BAMETA_EVENT, remdata).then((res) => {
              this.refreshData()
              this.checkbox = []
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            })
          })
        } else {
          this.$message.error('请至少选择一条记录进行删除')
        }
      },
      // 编辑
      editData () {
        // 判断是否勾选
        if (this.checkbox.length > 0) {
          if (this.checkbox.length < 2) {
            this.addRoleDialogVisiable = true // 显示弹框
            this.editmetadisa = true // meta_id input框禁止修改
            this.addRoleDialogMode = 'MODIFY' // 新增角色对话框模式 编辑模式
            // 获取时间格式化 再添加到时间选择框里面
              // let data = this.dialogForm
              // this.te_date = data.te_date
              // this.le_date = data.le_date
              // this.dialogForm.date = [this.te_date, this.le_date]
            // 定义变量接收一下当前对象
            this.currentItem = JSON.parse(JSON.stringify(this.dialogForm))
            // 解除双向绑定
            this.dialogForm = JSON.parse(JSON.stringify(this.dialogForm))
          } else {
            this.$message.error('只能选择一条记录进行编辑')
          }
        } else {
          this.$message.error('请选择一条记录进行编辑')
        }
      },
      // 显示数据列表-刷新
      refreshData () {
        let SELECTData = {
          pageNo: '1',
          pageSize: '10'
        }
        this.packAjax(SELECTData)
      },
      // 条件查询
      conditionquery () {
        let conditiondata = {
          keyword: this.condition
        }
        this.packAjax(conditiondata)
      },
      // 每页显示条目个数
      handleSizeChange: function (val) {
        this.pagesize = val
        this.handleCurrentChange()
      },
      // 当前页数
      handleCurrentChange (val) {
        this.currentPage = val
        let pagelistdata = {
          pageNo: val,
          pageSize: this.pagesize
        }
        this.packAjax(pagelistdata)
      },
      // 勾选框事件
      handleSelectionChange (val) {
        let checkedCount = val.length
        // 判断是不是全选
        if (checkedCount === this.tableData.length) {
          this.checkbox.length = checkedCount
        }
        this.list = []
        for (let i = 0; i < val.length; i++) {
          let remdata = {
            meta_id: val[i].meta_id,
            event_id: val[i].event_id
          }
          this.list.push(remdata)
        }
      },
      // 勾选当前行
      checkrow (row) {
        if (row.length > 0) {
          this.dialogForm = row[0]
          this.checkbox = row
        }
      },
      // 点击增加按钮后
      adddialogForm () {
        this.dialogForm = {} // 弹框表单重置为空
        this.addRoleDialogVisiable = true // 弹框显示
        this.addRoleDialogMode = 'ADD' // 弹框的模式 增加or编辑
        this.editmetadisa = false // input框是否禁止修改 false 可以修改 true 禁止修改
      },
      // 关闭
      closeDialog () {
        this.addRoleDialogVisiable = false
        this.editdialogform = false
        this.dialogForm = {...this.currentItem}
        this.$refs.dialogForm.clearValidate()
      },
      // 重置
      resetFormData () {
        // 如果是编辑进第一个判断
        this.$refs.dialogForm.clearValidate()
        if (this.addRoleDialogMode !== 'ADD') {
          this.dialogForm = {...this.currentItem}
        } else {
          this.dialogForm = {}
          this.$set(this.dialogForm, 'meta_id', this.local_meta_table_name)
        }
      },
      // 新增/修改 元事件
      submitFormData (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let insertdata = {
              meta_id: this.dialogForm.meta_id,
              event_id: this.dialogForm.event_id,
              event_name: this.dialogForm.event_name,
              event_type: this.dialogForm.event_type,
              event_group: this.dialogForm.event_group,
              busi_desc: this.dialogForm.busi_desc,
              tech_desc: this.dialogForm.tech_desc
            }
            if (this.addRoleDialogMode === 'ADD') {
              // 新增接口
              ajax.post(api.INSERT_BAMETA_EVENT, insertdata).then((res) => {
                this.refreshData()
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                })
              })
            } else if (this.addRoleDialogMode === 'MODIFY') {
              // 修改接口
              ajax.post(api.UPDATE_BAMETA_EVENT, insertdata).then((res) => {
                this.dialogForm = {}
                this.refreshData()
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                })
              })
            }
            this.checkbox = []
            this.addRoleDialogVisiable = false
            this.$refs.dialogForm.clearValidate() // 清除验证
          } else {
            return false
          }
        })
      },
      // 封装查询数据
      packAjax (data) {
        ajax.post(api.SELECT_BAMETA_EVENT_LIST_FORPAGE, data).then((res) => {
          this.tableLoading = false
          this.tableData = []
          this.tableData = res.data.list
          this.totalCount = res.data.total
        })
      }
    },
    created () {
      this.refreshData()
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  .el-button
    border-radius 4px
    border 1px solid #dcdfe6
  .el-button--primary
    color #fff !important
    background-color #409eff !important
    border-color #409eff !important
  .el-button--default
    color #606266 !important
    background #fff !important
  .el-container
    height 100%
    overflow hidden
    > .el-header
      height 56px !important
      background #ffffff
      line-height 56px
      color #5a5e66
      font-weight 700
      font-size 16px
  .el-main
    overflow auto
    height calc(100% - 66px)
    margin 0 10px
    > .header-tool-bar
      height 50px
      line-height 50px
      background #ffffff
      padding-left 20px
      margin-bottom 10px
    .conditionquery
      width 300px
      float right
      margin-right -10px
    .el-input--mini
      width 200px
  .dialogbtn.el-form-item
    text-align right !important
</style>
